<!-- 管理员:课程考核管理-考试计划管理-补缓考安排 -->
<template>
  <div style="width:100% !important;">
    <div>
      <el-form :model="queryParamsForm" class="formSearch">
        <div>
          <el-form-item label="学　　期" prop="bxxueqi">
            <el-select v-model="queryParamsForm.bxxueqi" size="mini" placeholder="请选择学期" style="width: 140px" clearable>
              <el-option v-for="(item, index) in xqList" :key="index" :label="item.xqmc" :value="item.xqmc">
              </el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="日期" prop="rq">
            <el-date-picker type="date" clearable value-format="yyyy-MM-dd"
            format="yyyy-MM-dd" placeholder="请选择日期" v-model="queryParamsForm.rq" style="width: 140px;" size="mini"></el-date-picker>
          </el-form-item> -->
          <el-form-item label="节　　次" prop="section">
            <el-select v-model="queryParamsForm.section" size="mini" placeholder="请选择节次" style="width:140px" clearable>
              <el-option v-for="item in sectionList" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="培养层次" prop="pylevel">
            <el-select v-model="queryParamsForm.pylevel" size="mini" style="width: 140px" placeholder="请选择培养层次"
              clearable>
              <el-option v-for="item in levelList" :key="item.dictKey" :label="item.dictValue" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="课程负责单位" prop="department">
            <el-select
              v-model="queryParamsForm.department"
              style="width: 140px;margin-right:5px"
              size="mini"
              placeholder="请选择"
              @change="handleXb"
              clearable
            >
              <el-option
              style="margin-right:5px"
                v-for="(item,index) in xbList"
                :key="index"
                :label="item.deptName"
                :value="item.deptName"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="queryParamsForm.teachingandresearchsection"
              style="width: 140px"
              size="mini"
              placeholder="请选择"
              @change="handleClass"
              clearable
            >
              <el-option
                v-for="(item,index) in gClassList"
                :key="index"
                :label="item.deptName ? item.deptName : item.value"
                :value="item.deptName ? item.deptName : item.value"
              >
              </el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="课程名称" prop="coursename">
            <el-input v-model="queryParamsForm.coursename" clearable size="mini" style="width:140px"
              placeholder="请输入课程名称"></el-input>
          </el-form-item>
          <el-form-item label="队别" prop="xyd">
            <el-select v-model="queryParamsForm.xyd" size="mini" placeholder="请选择队别" style="width: 140px" clearable>
              <el-option v-for="item in ddList" :key="item.id" :label="item.deptName" :value="item.deptName">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="级次" prop="jc">
            <el-select v-model="queryParamsForm.jc" size="mini" placeholder="请选择级次" style="width:140px" clearable>
              <el-option v-for="(item, index) in njList" :key="index" :label="item.xqszxn" :value="item.xqszxn">
              </el-option>
            </el-select>
          </el-form-item>

        </div>
        <div>
          <el-form-item label="专业班次" prop="proclassname">
            <el-select v-model="queryParamsForm.proclassname" size="mini" placeholder="请选择专业班次" style="width:140px"
              clearable>
              <el-option v-for="(item) in specialtyList" :key="item.id" :label="item.className" :value="item.className">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="考生姓名" prop="name">
            <el-input v-model="queryParamsForm.name" clearable size="mini" style="width:140px" placeholder="请输入考生名称">
            </el-input>
          </el-form-item>
          <el-form-item label="状　　态" prop="status">
            <el-select v-model="queryParamsForm.status" size="mini" placeholder="请选择状态" style="width:140px" clearable>
              <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <div style="display: inline-block;position: relative;top: 5px;">
            <div class="search-button" style="margin:2px 0 0 0;color: #51aef6; display: inline-flex;;
              flex-direction: row;
              align-items: center;
              justify-content: center;" @click="onSearchClickHandler">
              <img src="../../../../../assets/assessment/icon-search.png" alt="" />
              <span>查询</span>
            </div>
          </div>
          <!-- <div style="text-align:center">
          <el-button icon="el-icon-search" type="primary" @click="onSearchClickHandler" size="mini">查询</el-button>
          </div> -->
        </div>
      </el-form>
    </div>
    <div style="text-align:right;padding:0 0 15px 0;">
      <div class="search-button" style="width:120px;margin:2px 0 0 15px;border: 1px solid rgb(2, 200, 108);
      color: rgb(2, 200, 108);
      background: rgb(241, 255, 248);padding-right: 15px;" @click="isBatchArrange">
        <span>批量安排考试</span>
      </div>
      <div class="search-button" style="margin:2px 0 0 15px;background: #fff6dc;
      border: 1px solid #f1b107;
      color: #f1b107;padding-right: 6px;" @click="isCanIssuePlan">
        <span>下发核对</span>
      </div>
      <div class="search-button" style="margin:2px 0 0 15px;border: 1px solid rgb(2, 200, 108);
      color: rgb(2, 200, 108);
      background: rgb(241, 255, 248);padding-right: 15px;" @click="issueBatch">
        <span>发 布</span>
      </div>
      <div class="search-button"
        style="margin:2px 0 0 15px;background: #ffefef;border: 1px solid #fa5339;color: #ff3819;padding-right: 6px;"
        @click="stayIssueBatch">
        <span>取消发布</span>
      </div>
    </div>
    <div>
      <el-table :data="tableData" border class="xpaas-table-class" row-class-name="xpaas-row-class"
        cell-class-name="xpaas-cell-class" header-row-class-name="xpaas-header-row-class"
        header-cell-class-name="xpaas-header-cell-class" @selection-change="handleSelectionlssue">
        <el-table-column type="selection" width="75" align="center"></el-table-column>
        <el-table-column prop="status" label="状态" align="center" width="130">
          <template slot-scope="scope">
            <div v-show="scope.row.status == '1'">
              待排考
            </div>
            <div v-show="scope.row.status == '2'">
              待下发核对
            </div>
            <div v-show="scope.row.status == '6'">
              待教员审核
            </div>
            <div v-show="scope.row.status == '3'">
              待教研主任审核
            </div>
            <div v-show="scope.row.status == '4'">
              待发布
            </div>
            <div v-show="scope.row.status == '5'">
              已发布
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="kcdate" label="原考试日期" align="center"></el-table-column> -->
        <el-table-column prop="section" label="原考试节次" align="center"></el-table-column>
        <el-table-column prop="coursename" label="考试科目" align="center"></el-table-column>
        <!-- <el-table-column prop="xb" label="课程负责单位" align="center" width="150">
          <template slot-scope="scope">
            {{ scope.row.xb }}{{ scope.row.classroom }}
          </template>
        </el-table-column> -->
        <el-table-column prop="teacher" label="授课教员" align="center"></el-table-column>
        <el-table-column prop="pylevel" label="培养层次" align="center"></el-table-column>
        <el-table-column prop="team" label="学员队" align="center"></el-table-column>
        <el-table-column prop="name" label="姓名" align="center"></el-table-column>
        <el-table-column prop="jc" label="级次" align="center"></el-table-column>
        <el-table-column prop="proclassname" label="专业班次" align="center"></el-table-column>
        <el-table-column prop="kcmc" label="考场" align="center"></el-table-column>
        <el-table-column prop="bz" label="备注" align="center"></el-table-column>
      </el-table>
      <!-- <div class="search-result-desc-panel">
          <span>共找到 {{ searchResultPagin.totalCount }} 条记录，当前显示 {{
          (searchResultPagin.totalCount > 0) ? ((searchResultPagin.currentPage - 1) * searchResultPagin.perpageCount + 1) : (0)
          }} - {{
          (searchResultPagin.totalCount > 0) ? (searchResultPagin.currentPage * searchResultPagin.perpageCount) : (0)
          }} 条记录。</span>
        </div> -->
      <div class="search-result-pagin-panel">
        <el-pagination style="margin-top:15px" @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="current" :page-sizes="[10, 20, 30, 50]" :page-size="size"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { reqGetXqList, reqCheckYearList, reqCheckLevelList, reqZybcList, reqXydList, queryDictByCode } from "@/api/admin1/check";
import { getxb, getClass, queryXBclassroom } from "@/api/course/courses";
import { getSelectConditionList } from "@/api/examination/printBarCode";
import { updateBatchStatus } from "@/api/examination/approvalDelayedExam";
export default {
  data() {
    return {
      xqList: [],
      xbList: [],
      gClassList: [],
      levelList: [],
      njList: [],
      ddList: [],
      specialtyList: [],
      statusList: [
        {
          value: "1",
          label: "未排考"
        },
        {
          value: "2",
          label: "已排考"
        }
      ],
      queryParamsForm: {
        bxxueqi: '',
        teachingandresearchsection: '',
        department: '',
        xyd: '',
        jc: '',
        pylevel: '',
        coursename: '',
        section: '',
        name: '',
        proclassname: '',
        status: '',
        rq: ''
      },
      tableData: [],
      current: 1,
      size: 10,
      total: '',
      code: 'section',
      sectionList: [], //节次
      lssueSelection: [],
      idaS: '',
      statusIss: '5',
      stayIss: '4',
      checkT: '6',
      statusS: [],
    };
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  mounted() {
    this.termAll();
    this.xbAll();
    this.sectionData();
    this.classAll();
    this.gradeAll();
    this.ddAll();
    this.getlist();
    this.getLevelList();
    this.getSelectConditionList();
  },
  methods: {
    //批量安排考试
    isBatchArrange() {
      if (this.lssueSelection.length <= 0) {
        this.$message({ type: "error", message: '请先选择需要安排考试的数据！' });
      } else {
        let ids = this.idaS;
        if (this.statusS.includes('5') == '-1') {
          this.$message({ type: "error", message: '已发布的数据不能再安排！' });
        } else {
          this.$router.push({
            path: "/admin/examination/arrangeTestBatch",
            query: { ids }
          });
        }
      }
    },
    //安排考试
    arrangeExam(id) {
      this.$router.push({
        path: "/admin/examination/arrangeTest",
        query: { id }
      });
    },
    //表格列操作
    handleSelectionlssue(val) {
      this.lssueSelection = val;
      let newArr = [];
      let newStatus = [];
      val.forEach((element) => {
        newArr.push(element.id);
        newStatus.push(element.status)
        newArr = [...new Set(newArr)]
      });
      this.idaS = newArr.join(",");
      this.statusS = newStatus;
      console.log(this.statusS)
    },
    //操作列发布按钮
    release(row) {
      if (row.status < 4) {
        this.$message({ type: "error", message: '该条数据还不能发布！' });
      } else {
        this.batchIssueData(row.id, this.statusIss)
      }
    },
    //操作列取消发布
    stayIssue(ids) {
      this.batchIssueData(ids, this.stayIss)
    },
    //批量发布
    issueBatch() {
      if (this.lssueSelection.length <= 0) {
        this.$message({ type: "error", message: '请先选择需要发布的数据！' });
      } else {
        this.batchIssueData(this.idaS, this.statusIss);
      }
    },
    //批量取消发布
    stayIssueBatch() {
      if (this.lssueSelection.length <= 0) {
        this.$message({ type: "error", message: '请先选择需要取消发布的数据！' });
      } else {
        this.batchIssueData(this.idaS, this.stayIss);
      }
    },
    batchIssueData(ids, status) {
      updateBatchStatus(ids, status).then(res => {
        if (res.data.code == 200) {
          this.$message({
            showClose: true,
            message: '操作成功！',
            type: "success",
          });
          this.getSelectConditionList();
        } else {
          this.$message({
            showClose: true,
            message: res.data.msg,
            type: "error",
          });
        }
      })
    },
    //节次
    sectionData() {
      queryDictByCode(this.code).then(res => {
        this.sectionList = res.data.data;
      })
    },
    //获取专业班次
    async getlist() {
      const result = await reqZybcList();
      result.data.code == 200 ? this.specialtyList = result.data.data : [];
    },
    // 获取队别下拉框
    async ddAll() {
      const result = await reqXydList();
      result.data.code == 200 ? this.ddList = result.data.data : [];
    },
    // 获取学期
    async termAll() {
      const result = await reqGetXqList();
      if (result.data.code == 200) {
        this.xqList = result.data.data;
      }
    },
    // 获取培养层次下拉框
    async getLevelList() {
      const result = await reqCheckLevelList('pylevel');
      result.data.code == 200 ? this.levelList = result.data.data[0].children : [];
    },
    async xbAll() {
      const xb = await getxb();
      xb.data.code == 200 ? this.xbList = xb.data.data : [];
    },
    async classAll() {
      const gClass = await getClass();
      gClass.data.code == 200 ? this.gClassList = gClass.data.data : [];
    },
    // 根据系部选中获取教研室
    async handleXb(val) {
      if (val) {
        const xbClass = await queryXBclassroom(val);
        xbClass.data.code == 200 ? this.gClassList = xbClass.data.data : [];
        this.queryParamsForm.teachingandresearchsection = ''
      } else {
        this.xbAll();
        this.classAll();
      }
    },
    // 教研室下拉框的改变
    handleClass(val) {
      if (!val) {
        this.xb ? this.handleXb(this.xb) : this.classAll();
      }
    },
    //获取年级
    gradeAll() {
      let that = this;
      reqCheckYearList().then(res => {
        if (res.data.code == 200 && res.data.data) {
          that.njList = res.data.data;
        }
      });
    },
    getSelectConditionList() {
      getSelectConditionList(this.current, this.size, this.queryParamsForm).then(res => {
        if (res.data.code == 200) {
          this.tableData = res.data.data.records;
          this.total = res.data.data.total;
          // this.current = 1
        }
      })
    },
    onSearchClickHandler() {
      this.current = 1;
      this.getSelectConditionList()
      // this.$message({message: '点击测试', type: 'error'})
    },
    handleCurrentChange(val) {
      this.current = val;
      this.getSelectConditionList();
    },
    handleSizeChange(val) {
      this.size = val;
      this.getSelectConditionList();
    },
    //是否可以点击下发核对
    isCanIssuePlan() {
      if (this.lssueSelection.length <= 0) {
        this.$message({
          showClose: true,
          message: '请选择需要下发核对的数据！',
          type: "error",
        });
      } else {
        if (this.statusS.includes('2') != '1') {
          this.$message({
            showClose: true,
            message: '存在不能下发核对的数据，请再次确认！！',
            type: "info",
          });
          return false
        }
        updateBatchStatus(this.idaS, this.checkT).then(res => {
          if (res.data.code == 200) {
            this.$message({
              showClose: true,
              message: '操作成功！',
              type: "success",
            });
            this.getSelectConditionList();
          }
        })
      }
    },
  }
};
</script>

<style lang="less" scoped>
/deep/.el-form-item>.el-form-item__label {
  font-weight: 500;
}

.bk-lucj-expot-button {
  cursor: pointer;
  width: 95px;
  background: #fef1e8;
  border: 1px solid #f86900;
  box-sizing: border-box;
  margin: 0 auto 12px;
  border-radius: 6px;

  img {
    width: 13px;
    height: 13px;
    position: relative;
    top: 1px;
  }

  &:last-child {
    margin-bottom: 0px;
  }

  >span {
    color: #f86900;
    // margin-left: 5px;
  }
}

/deep/.el-date-editor .el-input__prefix {
  left: auto;
  top: 2px;
  right: 5px;
}

/deep/.el-input--mini .el-input__icon {
  line-height: 40px;
}

.search-button {
  cursor: pointer;
  box-sizing: border-box;
  justify-content: center;
  width: 70px;
  height: 27px;
  line-height: 25px;
  background: #f1f8fe;
  border: 1px solid #51aef6;
  border-radius: 6px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  display: inline-block;

  >img {
    width: 19px;
    height: 19px;
    margin-right: 4px;
  }
}
</style>

<style lang="less" scoped>
@fontFamily: "Microsoft YaHei";

.search-result-pagin-panel {
  text-align: right;
}

.el-pagination {
  color: red;

  ::v-deep>.el-pagination__total {
    color: #004ca7;
  }
}

.search-result-desc-panel {
  font-size: 14px;
  font-weidth: normal;
  font-family: @fontFamily;
  color: #004ca7;
  margin: 15px 0 0 0;
}

.xpaas-table-class {
  border: 1px solid #004ca7;
  border-radius: 9px;

  > ::v-deep div.el-table__header-wrapper {
    >table.el-table__header {
      >thead {
        >tr.xpaas-header-row-class {
          >th.xpaas-header-cell-class {
            border-left: 1px solid #c7d7eb;
            border-right: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;

            >div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }

          th:first-child {
            border-left: 0;
          }
        }
      }
    }
  }

  > ::v-deep div.el-table__body-wrapper {
    >table.el-table__body {
      >tbody {
        >tr.xpaas-row-class {
          >td.xpaas-cell-class {
            border-left: 1px solid #c7d7eb;
            border-right: 0;
            border-bottom: 1px solid #c7d7eb;

            >div.cell {
              font-weight: normal;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }

          td:first-child {
            border-left: 0;
          }
        }
      }
    }
  }
}



/* 声明常量 */
@formItemMargin: 0px;

.xpaas-form-item-6 {
  > ::v-deep .el-form-item__label {
    color: #004ca7;
    font-size: 16px;
    font-weight: bold;
    font-family: @fontFamily;
    width: 140px;
  }

  > ::v-deep .el-form-item__content {
    padding: 0 @formItemMargin;

    // margin-left: 15px;
    >.el-select {
      width: 100%;

      ::v-deep .el-input__inner {
        width: 100%;
      }
    }
  }
}

.el-form-item {
  margin-right: 42px;
  display: inline-block;

  > ::v-deep .el-form-item__label {
    color: #004ca7;
    font-size: 16px;
    font-weight: bold;
    font-family: @fontFamily;
  }

  > ::v-deep .el-form-item__content {
    display: inline-block;
    padding: 0 @formItemMargin;

    >.el-select {
      width: 100%;

      ::v-deep .el-input__inner {
        width: 100%;
      }
    }
  }
}
</style>
